<template>
    <view class="container">
        <!-- 视频播放器 -->
        <video :src="courseDetail.videoUrl" controls autoplay class="video-player animated-item" style="animation-delay: 0.1s" :danmu-list="danmuList" enable-danmu
            danmu-btn></video>

        <!-- 课程信息 -->
        <view class="course-header animated-item" style="animation-delay: 0.2s">
            <u-text :text="courseDetail.title" size="20" bold></u-text>

            <view class="author-info">
                <u-avatar :src="baseUrl+courseDetail.avatar" size="40"></u-avatar>
                <view class="author-meta">
                    <text class="author-name">{{ courseDetail.createBy }}</text>
                    <text class="create-time">{{courseDetail.createTime }}</text>
                </view>
            </view>
        </view>

        <!-- 课程简介 -->
        <view class="course-content animated-item" style="animation-delay: 0.3s">
            <h2 style="text-align: center;">课程简介</h2>
            <u-text :text="courseDetail.description" size="14" color="#606266"></u-text>
        </view>
    </view>
</template>

<script>
    import {getCourse} from '@/api/coursestudy/course.js'
    import config from '../../../config';
    export default {
        data() {
            return {
                baseUrl:config.baseUrl,
                courseId: null,
                courseDetail: {},
                playbackRate: 1.0,
                isMuted: false,
                danmuList: [{
                        text: '讲得真好',
                        color: '#ff0000',
                        time: 1
                    },
                    {
                        text: '学到了很多',
                        color: '#ff00ff',
                        time: 3
                    }
                ],
                // 虚拟数据
                courseData: [{
                        course_id: 1,
                        title: '劳动研学入门课程',
                        cover_image: '/static/images/course1.jpg',
                        description: '本课程将系统介绍劳动研学的基本概念、发展历程和实践方法。通过理论讲解和案例分析，帮助学员建立对劳动研学的全面认识，掌握基本的研学技能和方法。课程内容包括：劳动研学的定义与意义、国内外劳动研学发展现状、劳动研学课程设计原则、劳动研学实践活动组织与实施等。',
                        video_url: 'http://vjs.zencdn.net/v/oceans.mp4',
                        status: '0',
                        create_by: '研学教育中心',
                        create_time: '2023-06-10 09:30:00'
                    },
                    {
                        course_id: 2,
                        title: '乡村文化体验课程',
                        cover_image: '/static/images/course2.jpg',
                        description: '本课程将带领学员深入乡村，体验传统文化，学习非遗技艺。课程内容包括：乡村文化探访、传统手工艺制作、农耕文化体验、民间艺术欣赏等。通过亲身参与和实践，感受乡村文化的魅力，增强文化自信。',
                        video_url: 'https://example.com/video2.mp4',
                        status: '0',
                        create_by: '文化传承部',
                        create_time: '2023-06-05 14:15:00'
                    },
                    {
                        course_id: 3,
                        title: '自然生态研学课程',
                        cover_image: '/static/images/course3.jpg',
                        description: '本课程通过户外探索和实践活动，帮助学员了解自然生态系统，培养生态保护意识。课程内容包括：自然观察方法、生态系统基础知识、野外生存技能、环保实践活动等。通过课程学习，学员将建立人与自然和谐共生的理念。',
                        video_url: 'https://example.com/video3.mp4',
                        status: '0',
                        create_by: '生态教育组',
                        create_time: '2023-05-20 10:20:00'
                    }
                ]
            }
        },
        onLoad(options) {
            this.courseId = options.courseId;
            this.loadCourseDetail(this.courseId);
        },
        methods: {
            async loadCourseDetail(courseId) {
                const res = await getCourse(courseId)
                if (res) {
                    this.courseDetail = res.data;
                } else {
                    uni.showToast({
                        title: '课程不存在',
                        icon: 'none'
                    });
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1500);
                }
            },
            getAvatarUrl(name) {
                // 根据名字生成默认头像颜色
                const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'];
                const colorIndex = name.charCodeAt(0) % colors.length;
                return `https://via.placeholder.com/100/${colors[colorIndex].substring(1)}/fff?text=${name.substring(0,1)}`;
            },
            formatDateTime(dateStr) {
                if (!dateStr) return '';
                const date = new Date(dateStr);
                return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
            },
            togglePlaybackRate() {
                const rates = [0.5, 1.0, 1.5, 2.0];
                const currentIndex = rates.indexOf(this.playbackRate);
                this.playbackRate = rates[(currentIndex + 1) % rates.length];
                this.videoContext.playbackRate(this.playbackRate);
            },
            toggleMute() {
                this.isMuted = !this.isMuted;
                this.videoContext.muted(this.isMuted);
            }
        },
        onReady() {
            this.videoContext = uni.createVideoContext('myVideo', this);
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding-bottom: 100rpx;
        background-color: #fff;
        min-height: 100vh;
    }

    .video-player {
        width: 100%;
        height: 400rpx;
        background-color: #000;
    }

    .course-header {
        padding: 30rpx;
        border-bottom: 1rpx solid #ebeef5;
    }

    .author-info {
        display: flex;
        align-items: center;
        margin-top: 30rpx;
    }

    .author-meta {
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;
    }

    .author-name {
        font-size: 28rpx;
        color: #303133;
        font-weight: bold;
    }

    .create-time {
        font-size: 24rpx;
        color: #909399;
        margin-top: 5rpx;
    }

    .course-content {
        padding: 30rpx;
        font-size: 28rpx;
        line-height: 1.8;
        color: #606266;
    }

    .control-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        padding: 20rpx;
        background-color: #fff;
        border-top: 1rpx solid #ebeef5;
        z-index: 100;
    }

    .control-item {
        display: flex;
        align-items: center;
        padding: 10rpx 30rpx;
        border-radius: 50rpx;
        background-color: #f5f7fa;

        .control-text {
            margin-left: 10rpx;
            font-size: 24rpx;
        }
    }

    /* 新增动画样式 */
    .animated-item {
        opacity: 0;
        animation: fadeInUp 0.6s ease forwards;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>